<template>
    <div>
        <div style="margin-top: 10px">
            <el-table
                    v-loading="loading"
                    :data="settleSalaries"
                    border
                    stripe
                    size="small"
                    style="width: 100%">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="员工名称"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="jobNo"
                        label="员工工号"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="departmentName"
                        label="部门名称"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="allsalary"
                        label="税前工资"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="lateMoney"
                        label="迟到罚金"
                        width="60">
                </el-table-column>
                <el-table-column
                        prop="takeLeaveMoney"
                        label="请假罚金">
                </el-table-column>
                <el-table-column
                        prop="socialInsurance"
                        label="五险一金费用"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="taxMoney"
                        label="税金"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="actrualTaxSalary"
                        label="预扣缴额"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="actualIncome"
                        label="实际所得"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="createDate"
                        label="登记时间"
                        width="100">
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.row)">撤销
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="display: flex;justify-content:flex-start;margin-top: 10px">
                <el-pagination
                        background
                        @size-change="sizeChange"
                        @current-change="currentChange"
                        layout="sizes, prev, pager, next, jumper, ->, total, slot"
                        :total="total">
                </el-pagination>
            </div>
        </div>
    </div>

</template>

<script>
    export default {
        name: "SalSearch",
        data(){
            return{
                loading:false,
                settleSalaries:[],
                total: 0,
                pageNo: 1,
                pageSize: 10,
                multipleSelection:[]
            }
        },
        mounted() {
            this.getAllSettleSalaries();
        },
        methods:{
            handleDelete(data){
                this.$confirm('确定撤回【' + data.name + '】的工资单信息么, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.loading = true;
                    this.deleteRequest("/salary/month/"+data.id).then(resp=>{
                        this.loading = false;
                        if(resp){
                            this.getAllSettleSalaries();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            getAllSettleSalaries(){
                this.loading=true;
                this.getRequest("/salary/month/monthsalaries?pageNo=" + this.pageNo + "&pageSize=" + this.pageSize).then(resp=>{
                    this.loading=false;
                    if(resp){
                        this.settleSalaries = resp.data;
                        this.total = resp.total;
                    }
                })
            },
            //点击页码的时候触发的函数，将页码改变，然后传参去后端获取数据
            currentChange(currentPage) {
                this.pageNo = currentPage;
                this.getAllSettleSalaries();
            },
            //点击页数的时候触发的函数，将页数改变，然后传参去后端获取数据
            sizeChange(pageSize) {
                this.pageSize = pageSize;
                this.getAllSettleSalaries();
            }
        }
    }
</script>

<style>
    body .el-table th.gutter {
        display: table-cell !important
    }
</style>
